﻿/* Make card header flush so image can span full card width */
.mud-grid-spacing-xs-6 > .mud-grid-item {
    padding-left: 12px;
    padding-top: 24px;
}
.productlist_banner {
    background-image: url(../images/webs/mae_website_shop-now.png) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%; /* fills container */
    height: 300px; /* give it height */
    border-radius: 0px;
}

.product_list .category {
    font-family: 'Albra Semi';
    font-size: 1.5rem;
    color: #000;
    font-weight: bolder;
    text-transform: capitalize;
    margin: 30px 0 20px 0;
}
.product_bottom_desc img{
    width:100%
}

.mud-card .mud-card-header {
    padding: 0 !important;
}


.product-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    width: 100%;
    background-color: #f6f6f6;
}

    /* Fixed height bounds with object-fit to avoid shrinking on mobile */
    .product-image-wrap .product-img {
        width: 100%;
        height: auto; /* default display height */
/*        min-height: 320px;
        max-height: 320px;*/
        object-fit: contain; /* crop rather than stretch */
        display: block;
        background-color: #f6f6f6;
        padding:30px 0 50px 0

    }

.product_list .product-name {
    position: absolute;
    top: 10px;
    left: 15px;
    right: 15px;
    color: #000;
    font-family: 'dmsans-variablefont_opsz,wght';
    font-size:.8rem;
    height: 30px;
    z-index: 2;
    color: #000;
}
.product_list .product-remark {
    position: absolute;
    top: auto;
    margin-top: -15px;
    margin-left: 2.5%;
    width: 160px;
    padding: 2px 8px;
    font-family: 'dmsans-variablefont_opsz,wght';
    font-size: 7pt;
    line-height: 8pt;
    z-index: 2;
    color: #000;
    /*background: linear-gradient(to left,#f0eef9, #e9e3f6,#f0eef9);*/
    background: #ece5fd;
    text-align: center;
    border-radius: 8px;
    min-height: 30px;
    align-content: center;
}

.price-overlay {
    position: absolute;
    font-family: 'dmsans-variablefont_opsz,wght';
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 0px; /* minimal gap between price rows */
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent; /* transparent background as requested */
    padding: 0px 8px; /* reduced padding for compact layout */
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1rem;
}
    .price-row .Vpurple {
        padding-top: 0px;
        color: #7e57c2;
        font-weight: 400;
        font-size: .8rem;
        line-height: 1rem;
    }
    .price-row .currency {
        font-family: 'dmsans-variablefont_opsz,wght';
        font-size: 0.6rem;
        line-height: .6rem;
        font-weight: 500;
        color:#505050

    }

.product_list .button_add {
    /*       background: #B4A9DA;*/
    color: #000;
    background: #b4a9da;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 2px 0 10px 0;
    border-radius: 0px;
    border: solid #ab9ddb .02rem;
    font-family: 'dmsans-variablefont_opsz,wght';
    font-weight: 500;
    font-size: .875rem;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
}
    .product_list .button_add:hover {
        background: #ab9ddb;
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    }


    .product_list .button_add._item {
        background: #d6ccee;

    }

    /* Product Details*/
.breadcrumbs {
    padding: 0px;
    border-bottom: solid #eeeeee 1px;
    margin-bottom: 40px;
    margin-left:90px
}
    .breadcrumbs .mud-breadcrumbs {
        padding: 10px 0px;
    }


.btn_all, .btn_best {
    padding: 10px 32px !important;
    text-transform: none !important;
    font-weight: 600 !important;
 
}
.btn_all {
    border-radius: 25px 0 0 25px !important;
}  
    .btn_best {
        border-radius: 0 25px 25px 0 !important;
    }

.line-bottom {
    border-bottom: solid #eeeeee 1px;
    margin:20px 0;height:1px;background:#eeeeee
}
.productSeleted {
    width: 100%;
    height: auto;
    object-fit: fill !important;
    object-position: center !important;
}
.product_thum  {
    padding-right:15px
}
    .product_thum img {
        width: 100%;
        height: 100px;
        object-fit: cover !important; /* 自动裁剪填满容器 */
        object-position: center !important;
        /*    display: flex;
    flex-direction: column;*/
    }

.thumb {
    max-height: 100px;
    width: auto;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid transparent;
}

.selected-thumb {
    border: 1px solid #b4a9da; /* 蓝色高亮边框 */
    /*box-shadow: 0 0 5px #b4a9da7c;*/
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
}


._description {
    font-family: 'dmsans-variablefont_opsz,wght';
    font-size: .8rem !important;
    line-height: 1rem;
    font-weight: 400;
    padding-right: 160px;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

._description_btn {
    font-size: .9rem;
    font-weight: 500;
    text-decoration: underline;
    padding: 0;
    margin-top: 5px;
}

._buttonAddtocart{
    background:#b4a9da;
}

._quantity{
    display:flex;
    border:#e6e6e6 1.5px solid;
    border-radius:5px;
    width:125px;

}
._qty_packages ._quantity {
    display: flex;
    border: #e6e6e6 1.5px solid;
    border-radius: 5px;
    width: 100px;
}
    ._quantity .mud-input {
        width: 60px !important;
    }
 ._qty_packages ._quantity .mud-input {
    width:40px !important;

}
._quantity .mud-icon-root {
    width: 1rem;
    color: #505050;
    margin: 0 3px;
}

._quantity .mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-outlined input.mud-input-root-margin-dense {
    text-align: center;
    padding: 10px 0;
}

    ._quantity .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
        display: none;
    }
._quantity .mud-input.mud-input-outlined .mud-input-outlined-border{
    border:none;
}
._qty_addcart {
    display: flex;
    margin-top:50px;
}
    ._qty_addcart ._buttonAddtocart {
        background: #b4a9da;
        width:100%;
        margin-left:20px
    }

._qty_packages {
    justify-items: center;
    padding:0 0px;
}
    ._qty_packages img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    ._qty_packages .name {
        line-height: .7rem;
        font-size: .6rem;
        text-align: center;
        padding: 0px 3px;
        margin-top: 0px;
        height: 28px;
        align-content: center;
        background: #f3e5fe;
        width: 100%;
        margin-bottom: 5px;
        color: #000;
        font-weight: 400
    }
    ._qty_packages ._quantity .mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-outlined input.mud-input-root-margin-dense {
        padding: 0px 0;
    }


@media (max-width: 1024px) {
}

@media (max-width: 956px) {
    .product-image-wrap .product-img {
/*        height: 430px;
        min-height: 430px;*/
    }
    .productlist_banner {
        background-position: left;
        height: 130px; /* give it height */
        border-radius: 0px;
    }

    .product_list .category {

        font-size: 1rem;
        margin: 15px 0 10px 0;
        color:#333
    }
    .product_list .product-name {
        font-size: 0.65rem;
    }
    .product_list .button_add {
        font-size: .9em;
    }
    .product_list .button_add {
        background: #111;
        color: #fff;
        border-radius:0;
        border:none;
    }


    /* Product Details*/
    .breadcrumbs {
        margin-bottom: 5px;
        margin-left: 0px;
        border:none
    }

        .breadcrumbs .mud-breadcrumbs {
            padding: 10px 0px;
            font-size:.65rem
        }

        .breadcrumbs .active {
            font-weight:500;
        }

    .productSeleted {
        width: 100%;
        height: 390px;
        object-fit: cover !important; /* 自动裁剪填满容器 */
    }
    .product_thum img {
        width: 52px;
        height: 52px;
    }

    .thumb {
        max-height: 52px;
        margin-right:10px;
    }

    ._qty_packages {
        padding: 0 1px 5px 1px;
        background: #fff;
        border: .02rem #505050 solid;
        border-radius: 2px;
    }
        ._qty_packages ._quantity {
            border: #505050 0px solid;
            border-radius: 1px;
        }
        ._qty_packages img {
            width: 100%;
            height: 100px;
            object-fit: contain !important;
            border-radius: 2px;
        }

        ._qty_packages .name {
            line-height: .55rem;
            font-size: .55rem;
            margin-top: -15px;
            font-weight:500;
        }

        ._qty_packages ._quantity .mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-outlined input.mud-input-root-margin-dense {
            padding: 0px 0;
        }
}
.Point-value p {
    width: 100px
}
@media (max-width: 600px) {
    .product_details_box{
        padding-bottom:65px;
    }
    .mobile_productdetails_price {
        position: fixed;
        background: #f8f5fe;
        width: 100%;
        left: 0;
        z-index: 9;
        bottom: 75px;
        padding: 16px
    }

        .mobile_productdetails_price ._qty_addcart{
            margin-top:5px;
        }

    .mobile_productdetails_price .Point-value {
        margin: 5px 0
    }
            .mobile_productdetails_price .Point-value p {
                font-size: .675rem;
                font-weight: 400;
                width: auto;
                padding-right:5px;
            }


        .mobile_productdetails_price ._quantity {

            border:none;

        }
            .mobile_productdetails_price ._quantity .mud-icon-root {
                width: 1rem;
                color: #b4a9da;
                margin: 0 3px;
            }
            .mobile_productdetails_price ._quantity .mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-outlined input.mud-input-root-margin-dense {
                padding: 5px 0;
 
            }
        .mobile_productdetails_price ._qty_addcart ._buttonAddtocart {
            background: #480066;
            width: 100%;
            margin-left: 20px;
            border-radius: 0;
        }
        .mobile_productdetails_price .mud-input {
            width: 40px !important;
            background: #fff;
        }
        .mobile_productdetails_price .mud-icon-button-label {
            background: #000;
            color: #fff;
        }

    .Product_addcart_footerbar {
        display: none;
    }
    ._description {
        padding-right: 10px;
    }

    ._description_btn {
        font-size: .55rem;
        color: #888;
        padding: 0px 13px 0px 0px;
        text-transform: capitalize;
        text-decoration: none;
        min-width:none;
    }
        ._description_btn .mud-icon-size-medium {
            font-size: .8rem;
            border-radius: 25px;
            border: .5px solid #999;
            margin-left: 3px;
        }


    .product-image-wrap .product-img {
/*        height: auto;
        min-height: 290px;*/
    }
    .product_list .product-remark {

        margin-left: 18px;

    }

}
@media (max-width: 480px) {

    .price-row .Vpurple {
        padding-top: 0px;
        color: #480066;
        font-weight: 400;
        font-size: .75rem;
        line-height: 1.1rem;
        margin-right: 0px;
    }

    .price-row .currency {
        font-family: 'dmsans-variablefont_opsz,wght';
        font-size: 0.6rem;
        line-height: .6rem;
        font-weight: 400;
        color:#000
    }



    ._description span{
        font-size:.6rem;
    
    }
    .product_details_box .mud-typography-h4 {
        font-size: 1rem;
        font-weight:400;
        margin-top:15px;
    }
    .product_details_box .mud-typography-h5 {
        font-size: .85rem;
        color:#000
    }
    .sticky-selectedImage {
        top: 0PX;
        height: 100%;
        background: #f6f6f6;
    }
        .sticky-selectedImage .mud-image.fluid {
            max-width: 100%;
            height: 100%;
        }
    .product_thum {
        padding:5px 5px;
    }
        .product_thum img {
            width: 100%;
            height: 52px;
        }


    .selected-thumb {
        border: 2px solid #fff;
        /* box-shadow: 0 0 5px #b4a9da7c; */
        box-shadow: none;
    }
    .MarkupString-P p {
        font-size: .7rem;
        min-height: 2px;
    }
    .MarkupString-P span {
        font-size: .7rem;
    }
    .MarkupString-P._2 p {
        padding-bottom: 0px;
        min-height: 10px;
        font-size: .7rem;
    }
    .MarkupString-P._2 strong {
        font-size: .75rem;
    }
    .MarkupString-P._2 p span {
        font-size: .7rem;
    }
    .mobile_productdetails_price {
        bottom: 75px;
        padding: 5px 0px 20px;
    }

        .mobile_productdetails_price .mud-icon-button-label {
            background: #f1f1f1;
            color: #000;
        }
        .mobile_productdetails_price ._quantity .mud-icon-root {
            width: 1rem;
            color: #000;
            margin: 0 5px;
        }

    .mobile_productdetails_price .mud-typography-h5 b {
        font-size: 1rem;
        padding-bottom:10px;
        font-weight: 500;
    }
    .mobile_productdetails_price .Point-value {
        margin: 0px 0;
    }
    .mobile_productdetails_price ._qty_addcart ._buttonAddtocart {
        background: #ab9ddb;
        color: #000;
        width: 100%;
        margin-left: 20px;
        border-radius: 25px;
        font-weight: 500;
    }
        .mobile_productdetails_price ._qty_addcart ._buttonAddtocart p {
            font-weight: 400;
            font-size: .85rem;
        }
    .mobile_productdetails_price ._qty_addcart ._buttonAddtocart .mud-button-icon-size-medium > *:first-child {
        font-size: 1rem;
    }
    .mobile_productdetails_price ._qty_addcart {
        margin-top: 5px;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
    }
    .mobile_productdetails_price ._quantity {
        width: auto;
    }
    .mobile_productdetails_price ._row {
        display: flex !important;
        flex-direction: row !important;
        gap: 0px;
        justify-content: space-around;
        align-items: center;
    }

    .btn_all span, .btn_best span{
        font-weight: 400 !important;
        font-size:.9rem
    }
    .product-image-wrap {
        border-radius: 10px;
    }
    .product_list .category {
        font-size: 1rem;
        font-weight: 500;
        margin: 20px 0;
        text-align:center;
        color: #000;
        font-size: 1;
        font-family: 'dmsans-variablefont_opsz,wght'
    }
    .product_list .button_add {
        background: #fff;

        box-shadow: none;
        margin: 0;
        padding:8px 15px;
    }
    .product_list .button_add span {
        background: #ab9ddb;
        color: #000;
        width: 100%;
        padding: 10px 15px;
        border-radius: 25px;
        font-weight: 400;
        text-transform: capitalize;
    }
    .selectPcks {
        padding: 10px 0px;
    }
    .selectPcks .mud-typography-subtitle2{
        font-size:.8rem
    }
        .selectPcks .mud-typography-subtitle1 {
            font-size: .7rem;
            padding: 5px 0px;
        }
            .selectPcks .mud-typography-subtitle1.name {
                font-size: .5rem;
                padding: 0px 0px;
                margin-top: 00px;
                font-weight: 300;
            }
    ._qty_packages img {

         height: 100%; 
 
    }
}

._description.collapsed {
    height: 18px;
    overflow: hidden;
}

._description.expanded {
    height: auto;
}
